import { Button, Card, Checkbox, Form, Input, Link, Message } from "@arco-design/web-react";
import { invoke } from "@tauri-apps/api/core";
import { useRef } from "react";
import { useNavigate } from "react-router-dom";

const Login = () => {
    const nav = useNavigate();
    const useridRef = useRef<any>('');
    const passwordRef = useRef<any>('');
    const login = () => {
        console.log(useridRef.current.dom.value)

        const doLogin = async (userid:string,password:string) => {
            let result:any = await invoke('login',{userid:userid,password:password});
            console.log(result)
            if (result.status===200){
                nav("/home")
            }else {
                Message.error("账户或密码错误")
            }
        }

        doLogin(useridRef.current.dom.value,passwordRef.current.dom.value);

        

    }
    return(
        <>
            <Card title='登录' extra={<Link onClick={() => nav('/register')}>立即注册</Link>}>
                <Form>
                    <Form.Item label="账号">
                        <Input placeholder="请输入账号" ref={useridRef}/>
                    </Form.Item>
                    <Form.Item label="密码">
                        <Input type="password" placeholder="请输入密码" ref={passwordRef}/>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset:5}}>
                        <Checkbox>同意用户协议</Checkbox>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset:5}}>
                        <Button type="primary" onClick={login}>登录</Button>
                        <Button type="primary">取消</Button>
                    </Form.Item>
                </Form>
            </Card>
        </>
    )
}
export default Login;